<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店详情</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/css/layui.css">
    <style>
        body {
            background-color: #f7f9fc;
            padding: 20px;
        }
        .hotel-detail {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
        }
        .hotel-detail img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        h1, h2, p {
            text-align: left; /* 修改为左对齐 */
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">酒店展示</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">关于我们</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">联系我们</a>
            </li>
        </ul>
    </div>
</nav>

<div class="hotel-detail">
    <img id="hotel-image" src="" alt="酒店图片">
    <h1 id="hotel-name">酒店A</h1>
    <p id="hotel-description">现代化酒店，设施齐全，提供免费Wi-Fi、游泳池和健身房。</p>

    <h2>酒店设施</h2>
    <ul>
        <li>免费Wi-Fi</li>
        <li>游泳池</li>
        <li>健身房</li>
        <li>餐厅</li>
        <li>24小时客房服务</li>
    </ul>

    <h2>住宿信息</h2>
    <p>房间类型：单人间/双人间/豪华套房</p>
    <p>价格范围：$100 - $300/晚</p>

    <h2>位置</h2>
    <p>位于市中心，交通便利，附近有多家餐厅和购物中心。</p>

    <form onsubmit="submitReservation(event)">
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" required class="form-control" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="phone">电话</label>
            <input type="text" id="phone" required class="form-control" placeholder="请输入电话">
        </div>
        <div class="form-group">
            <label for="checkInDate">入住日期</label>
            <input type="date" id="checkInDate" required class="form-control">
        </div>
        <div class="form-group">
            <label for="checkOutDate">退房日期</label>
            <input type="date" id="checkOutDate" required class="form-control">
        </div>
        <button type="submit" class="layui-btn">预约</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
    function submitReservation(event) {
        event.preventDefault();
        const name = document.getElementById('name').value;
        const phone = document.getElementById('phone').value;
        const checkInDate = document.getElementById('checkInDate').value;
        const checkOutDate = document.getElementById('checkOutDate').value;

        console.log('预约信息：', { name, phone, checkInDate, checkOutDate });
        alert('预约成功！');
    }

    function getHotelId() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }

    function loadHotelDetails() {
        const hotelId = getHotelId();
        // 假设根据ID来获取数据
        if (hotelId === '1') {
            document.getElementById('hotel-name').innerText = '酒店A';
            document.getElementById('hotel-description').innerText = '现代化酒店，设施齐全，提供免费Wi-Fi、游泳池和健身房。';
            document.getElementById('hotel-image').src = 'https://via.placeholder.com/600x400?text=酒店A';
        } else if (hotelId === '2') {
            document.getElementById('hotel-name').innerText = '酒店B';
            document.getElementById('hotel-description').innerText = '舒适安静，适合休闲，距离市中心仅5分钟车程。';
            document.getElementById('hotel-image').src = 'https://via.placeholder.com/600x400?text=酒店B';
        } else if (hotelId === '3') {
            document.getElementById('hotel-name').innerText = '酒店C';
            document.getElementById('hotel-description').innerText = '豪华酒店，提供餐饮服务、SPA和会议设施，非常适合商务旅客。';
            document.getElementById('hotel-image').src = 'https://via.placeholder.com/600x400?text=酒店C';
        } else if (hotelId === '4') {
            document.getElementById('hotel-name').innerText = '酒店D';
            document.getElementById('hotel-description').innerText = '靠近海滩，享有绝佳景色，提供水上运动设施。';
            document.getElementById('hotel-image').src = 'https://via.placeholder.com/600x400?text=酒店D';
        } else if (hotelId === '5') {
            document.getElementById('hotel-name').innerText = '酒店E';
            document.getElementById('hotel-description').innerText = '为家庭旅客提供宽敞的房间和儿童活动区，欢迎儿童入住。';
            document.getElementById('hotel-image').src = 'https://via.placeholder.com/600x400?text=酒店E';
        }
    }

    window.onload = loadHotelDetails;
</script>

</body>
</html>
